<script setup>
import SmtHeader from '@/layout/SmtHeader.vue';
import SmtFooter from '@/layout/SmtFooter.vue';
import PricingForm from './components/PricingForm.vue';
import { ArrowRight } from '@element-plus/icons-vue';
import { inject } from 'vue';
import { ref, reactive, onMounted } from 'vue';
import { SocialAccountAuthorization } from '@/server/api/auth.js';
import { useRouter } from 'vue-router';
onMounted(() => {
  initQuickLogin();
});
const images = inject('images');

const serviceList = [
  {
    icon: images['icon_service_1@2x'],
    desc: 'home.pcbServe',
    id: 1,
  },
  {
    icon: images['icon_service_2@2x'],
    desc: 'home.multilayerBoard',
    id: 2,
  },
  {
    icon: images['icon_service_3@2x'],
    desc: 'home.FPCSoftBoard',
    id: 3,
  },
  {
    icon: images['icon_service_4@2x'],
    desc: 'home.smtPatch',
    id: 4,
  },
];

const chooseList = [
  {
    title: 'home.localService',
    desc: 'home.localServiceText',
  },
  {
    title: 'home.qualityAssurance',
    desc: 'home.qualityAssuranceText',
  },
  {
    title: 'home.promptDelivery',
    desc: 'home.promptDeliveryText',
  },
  {
    title: 'home.nonDisclosureAgreement',
    desc: 'home.nonDisclosureAgreementText',
  },
];

const introList = [
  {
    num: '50',
    descs: ['home.countriesWorldwide', 'home.countriesWorldwideText'],
    bgImg: images['bg_intro_1@2x'],
  },
  {
    num: '3000',
    descs: ['home.happyCustomers', 'home.happyCustomersText'],
    bgImg: images['bg_intro_2@2x'],
  },
];

const productList = [
  {
    img: images['icon_feature_1@2x'],
    desc: 'home.cameraPCB',
  },
  {
    img: images['icon_feature_1@2x'],
    desc: 'home.marineShip',
  },
  {
    img: images['icon_feature_1@2x'],
    desc: 'home.aircraftAccelerometer',
  },
  {
    img: images['icon_feature_1@2x'],
    desc: 'home.automotiveIntegrated',
  },
];

const featureList = [
  {
    icon: images['icon_feature_1@2x'],
    title: 'home.productQuality',
    desc: 'home.productQualityText',
  },
  {
    icon: images['icon_feature_2@2x'],
    title: 'home.fastDelivery',
    desc: 'home.fastDeliveryText',
  },
  {
    icon: images['icon_feature_3@2x'],
    title: 'home.costPerformance',
    desc: 'home.costPerformanceText',
  },
  {
    icon: images['icon_feature_4@2x'],
    title: 'home.rawMaterials',
    desc: 'home.rawMaterialsText',
  },
];

const router = useRouter();

const orderNow = () => {
  router.push('/pricing/pcb');
};

const showVideo = ref(false);
let tabItem = ref({
  1: {
    icon: images['icon_service_1@2x'],
    title: 'home.pcbServe',
    arr: ['home.fr', 'home.aluminumPlate', 'home.tscs', 'home.rogers'],
    prodImg: images['PCB2'],
    desc: 'home.pcbServeText',
  },
  2: {
    icon: images['icon_service_2@2x'],
    title: 'home.multilayerBoard',
    arr: ['home.Ply64', 'home.highBoard'],
    prodImg: images['PCB1'],
    desc: 'home.multilayerBoardText',
  },
  3: {
    icon: images['icon_service_3@2x'],
    title: 'home.FPCSoftBoardServe',
    arr: ['home.supportPanel', 'home.performance'],
    prodImg: images['fpc'],
    desc: 'home.FPCSoftBoardText',
  },
  4: {
    icon: images['icon_service_4@2x'],
    title: 'home.smtPatchServe',
    arr: ['home.placementService', 'home.waveSoldering', 'home.doubleSidedSticker'],
    prodImg: images['SMT'],
    desc: 'home.smtPatchServeText',
  },
});

let pcbId = ref(1);
/**
 * 切换PCB服务
 */
const tabPCB = (item) => {
  console.log(item, 'item');
  pcbId.value = item.id;
};

// 跳转计价页面
const toPricing = () => {
  router.push({
    path: '/pricing/pcb',
  });
};

// 查看视频
const handleQueryVideo = () => {
  showVideo.value = true;
  document.body.style.overflow = 'hidden'; // 禁止页面滚动
};

const closeVideo = () => {
  showVideo.value = false;
  document.body.style.overflow = ''; // 禁止页面滚动
};

/**
 * 初始化是否有第三方登录
 */
const initQuickLogin = () => {
  var currentURL = window.location.href;
  var url = new URL(currentURL);
  var state = url.searchParams.get('state');
  var code = url.searchParams.get('code');
  if (state && code) {
    console.log('state', state);
    console.log('code', code);
    accountAuthorization(state, code);
  }
};

/**
 * 社交账号sso登录
 */
const accountAuthorization = (state, code) => {
  const type = localStorage.getItem('loginType') || '';
  const obj = {
    code: code,
    scope: 'all',
    state: state,
    type: type,
  };
  SocialAccountAuthorization(obj).then((res) => {
    if (res.code === 200) {
      window.localStorage.removeItem('loginIfo');
      window.localStorage.setItem('loginIfo', JSON.stringify(res.data));
      const protocol = window.location.protocol;
      const host = window.location.host;
      const currentPath = protocol + '//' + host;
      window.location.href = currentPath;
    }
  });
};
</script>

<template>
  <div class="home-index">
    <!-- 头部 -->
    <smt-header></smt-header>
    <!-- 轮播图 -->
    <el-carousel height="500px">
      <el-carousel-item v-for="item in 4" :key="item">
        <div class="carousel-item">
          <router-link to="/pricing/pcb">
            <img style="width: 100%" :height="520" src="../../assets/images/home/home_banner.jpg" />
          </router-link>
        </div>
      </el-carousel-item>
    </el-carousel>
    <!-- 计价 -->
    <div class="pricing-content container">
      <pricing-form></pricing-form>
    </div>
    <!-- 服务 -->
    <div class="service-content">
      <div class="service-box container">
        <div
          class="service-box-item"
          v-for="(item, index) in serviceList"
          :key="index"
          @click="tabPCB(item)"
        >
          <img :src="item.icon" class="service-box-item-img" alt="" />
          <p class="service-box-item-desc">{{ $t(item.desc) }}</p>
        </div>
      </div>
      <div class="banner-box">
        <!-- PCB服务banner -->
        <div class="banner-box-item container">
          <img :src="tabItem[pcbId].prodImg" class="banner-box-item-img" />
          <div class="banner-main">
            <h2>{{ $t(tabItem[pcbId].title) }}</h2>
            <ul class="tag-list">
              <li class="tag-item" v-for="item in tabItem[pcbId].arr" :key="item">
                <span class="tag">{{ $t(item) }}</span>
              </li>
            </ul>
            <p class="banner-desc">
              {{ $t(tabItem[pcbId].desc) }}
            </p>
            <el-button type="primary" @click="orderNow">{{
              $t('home.priceImmediately')
            }}</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择我们 -->
    <div class="choose-us-content container">
      <div class="title-wrap">
        <h2 class="title">{{ $t('home.whyChooseUs') }}</h2>
        <p class="sub-title">{{ $t('home.whyWork') }} {{ $t('home.loveUs') }}</p>
      </div>

      <div class="card-box">
        <div class="card-box-item" v-for="(item, index) in chooseList" :key="index">
          <p class="card-box-item-num">{{ `0${index + 1}` }}</p>
          <p class="card-box-item-title">{{ $t(item.title) }}</p>
          <p class="card-box-item-desc">{{ $t(item.desc) }}</p>
          <el-button class="order-btn" type="primary" @click="toPricing">{{
            $t('home.priceImmediately')
          }}</el-button>
        </div>
      </div>
      <div class="intro-box">
        <div
          class="intro-box-item"
          :style="`background-image: url('${item.bgImg}')`"
          v-for="(item, index) in introList"
          :key="index"
        >
          <p class="intro-box-item-num">{{ item.num }}+</p>
          <div class="intro-box-item-descs">
            <p class="desc" v-for="(desc, idx) in item.descs" :key="idx">{{ $t(desc) }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="about-content">
      <!-- <video ref="videoPlayer" controls>
        <source :src="'https://static.jlcsmt.com/video/home.mp4'" type="video/mp4" />
      </video> -->
      <div class="about-wrap container">
        <h2>{{ $t('home.goIbe') }}</h2>
        <div class="about-link-wrap">
          <div class="about-link" @click="handleQueryVideo">
            <div class="link">
              <img src="@/assets/images/home/icon-video@2x.png" alt="" />
              <span>{{ $t('home.viewVideo') }}</span>
              <el-icon :size="16"><ArrowRight /></el-icon>
            </div>
          </div>
          <div class="about-link">
            <a href="https://www.pcbaaa.com/about-us/" class="link" target="_blank">
              <span>{{ $t('home.learnMore') }}</span>
              <el-icon :size="16"><ArrowRight /></el-icon>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- 产品介绍 -->
    <div class="product-content container">
      <h2 class="title">{{ $t('home.productDescription') }}</h2>
      <div class="product-box">
        <div class="product-box-item" v-for="(item, index) in productList" :key="index">
          <img :src="item.img" width="290" />
          <p class="product-box-item-desc">{{ $t(item.desc) }}</p>
        </div>
      </div>
      <!-- 特征容器 -->
      <div class="feature-box container">
        <div class="feature-box-item" v-for="(item, index) in featureList" :key="index">
          <img :src="item.icon" class="feature-box-item-img" alt="" />
          <p class="feature-box-item-title">{{ $t(item.title) }}</p>
          <p class="feature-box-item-desc">{{ $t(item.desc) }}</p>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <smt-footer></smt-footer>

    <!-- 查看视频 -->
    <div v-if="showVideo" class="video-modal">
      <div class="video-container">
        <video controls style="width: 1000px; height: 565px" autoplay>
          <source src="@/assets/video/IBE.mp4" type="video/mp4" />
          {{ $t('mall.browser_not_support_video') }}
        </video>
        <img
          src="@/assets/images/home/close_video.png"
          alt=""
          class="close_video"
          @click="closeVideo"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-index {
  .container {
    width: 1440px;
    margin: 0 auto;
  }
  .carousel-item {
    height: 500px;
    background: gray;
  }

  .pricing-content {
    padding-top: 54px;
    padding-bottom: 100px;
  }

  .service-content {
    .service-box {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      padding-left: 85px;
      padding-right: 85px;
      height: 176px;
      &-item {
        cursor: pointer;
        &-img {
          width: 100px;
        }
        &-desc {
          padding-top: 4px;
          font-size: 20px;
          text-align: center;
        }
        &:hover {
          border-bottom: 4px solid var(--mall-color-primary);
        }
      }
    }

    .banner-box {
      box-sizing: border-box;
      height: 500px;
      background: #f2f8ff;
      padding-top: 95px;
      &-item {
        display: flex;
        &-img {
          margin-top: 35px;
          width: 480px;
          height: 242px;
        }
        .banner-main {
          flex: 1;
          padding-left: 108px;
          h2 {
            font-size: 36px;
            font-weight: 500;
          }
          .tag-list {
            padding-top: 24px;
            .tag-item {
              display: inline-block;
              padding-right: 12px;
              .tag {
                padding: 2px 12px;
                font-size: 14px;
                height: 21px;
                border-radius: 4px;
                border-radius: 4px;
                background: #f0f0ff;
                color: var(--mall-color-primary);
              }
            }
          }
          .banner-desc {
            padding-top: 45px;
            padding-bottom: 40px;
            color: var(--mall-text-color-primary);
            font-size: 14px;
          }
        }
      }
    }
  }

  .choose-us-content {
    .title-wrap {
      padding-top: 62px;
      text-align: center;
      .title {
        color: var(--mall-text-color-primary);
        font-size: 24px;
        font-weight: 300;
      }
      .sub-title {
        margin: 0 auto;
        width: 636px;
        padding: 12px 0 72px;
        color: var(--mall-text-color-primary);
        font-size: 30px;
        font-weight: 500;
      }
    }

    .card-box {
      display: flex;
      justify-content: space-between;
      &-item {
        position: relative;
        box-sizing: border-box;
        width: 270px;
        height: 360px;
        padding: 16px;
        background: #f5f5f5;
        border-radius: 12px;
        &:nth-child(even) {
          .card-box-item-num {
            color: var(--mall-text-color-primary);
          }
        }

        &-num {
          color: #a6a6a6;
          font-size: 40px;
          font-weight: 700;
        }

        &-title {
          padding: 16px 0;
          color: var(--mall-text-color-primary);
          font-size: 16px;
          font-weight: 700;
        }

        &-desc {
          color: var(--mall-text-color-primary);
          font-size: 14px;
        }

        .order-btn {
          position: absolute;
          bottom: 24px;
          right: 24px;
        }
      }
    }

    .intro-box {
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      margin-top: 24px;
      &-item {
        width: 580px;
        height: 266px;
        padding-top: 100px;
        color: var(--mall-text-color-primary);
        background-size: contain;
        background-repeat: no-repeat;
        text-align: center;

        &-num {
          padding-bottom: 42px;
          font-size: 40px;
          font-weight: 700;
          font-family: 'SourceHanSansCN';
        }
        &-descs {
          .desc {
            font-size: 14px;
          }
        }
      }
    }
  }

  .about-content {
    box-sizing: border-box;
    height: 540px;
    padding-top: 180px;
    background: var(--mall-text-color-primary);
    text-align: center;

    .about-wrap {
      h2 {
        color: #fff;
        padding-bottom: 24px;
        font-size: 36px;
        font-weight: 700;
      }

      .about-link-wrap {
        display: flex;
        justify-content: center;
        .link {
          color: #fff;
          font-size: 18px;
          cursor: pointer;
          display: flex;
          align-items: center;
          &:hover {
            color: var(--mall-color-primary);
          }
          &:first-child {
            padding-right: 40px;
          }
          > img {
            width: 22px;
            vertical-align: middle;
            margin-right: 10px;
          }
        }
      }
    }
  }

  .product-content {
    padding-top: 72px;
    h2 {
      padding-bottom: 54px;
      color: var(--mall-text-color-primary);
      font-size: 30px;
      font-weight: 700;
      text-align: center;
    }

    .product-box {
      display: flex;
      justify-content: space-between;
      &-item {
        box-sizing: border-box;
        padding: 36px 24px;
        width: 270px;
        height: 360px;
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 6.31px 7.89px 0 #f2f2fa;
        > img {
          width: 228px;
          height: 206px;
        }
        &-desc {
          padding-top: 16px;
          width: 230px;
          font-size: 14px;
        }
      }
    }

    .feature-box {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      padding: 72px 52px 54px;
      &-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 26px;
        text-align: center;
        &-img {
          width: 78px;
          height: 78px;
        }
        &-title {
          padding-top: 16px;
          font-size: 18px;
          font-weight: 700;
          color: var(--mall-text-color-primary);
        }
        &-desc {
          padding-top: 8px;
          font-size: 16px;
          color: #666666;
        }
      }
    }
  }
}

.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.video-container {
  padding: 20px;
  position: relative;
  border-radius: 5px;
  .close_video {
    width: 25px;
    height: 25px;
    position: absolute;
    right: -10px;
    top: -10px;
    cursor: pointer;
  }
}
</style>
